<template>
  <q-page class="q-pa-md wrapBox" v-loading="loading">
    <div class="nav">
      <el-breadcrumb separator="/">
        <el-image src="/svgs/modelApplication.svg" style="width: 17px;margin: 0 10px 0 0" fit />
        <el-breadcrumb-item>{{ $t('modelService') }}</el-breadcrumb-item>
        <el-breadcrumb-item><span style=" color: #333;">{{ $t('servicesMarketing') }}</span></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="datasetBox">
      <div class="contentBox_title">
        {{ $t('servicesMarketing') }}
        <el-row class="mb-4 searchBox" style="margin-bottom: 15px;">
          <div>
            <el-input v-model.trim="searchName" placeholder="搜索任务名称" spellcheck="false">
              <template #append>
                <el-button :icon="Search" />
              </template>
            </el-input>
          </div>
        </el-row>
      </div>
      <div class="contentBox">
        <div class="row justify-around  dataBox">
          <div class="oneData" v-for="(item, index) in dataList.results" :key="index">
            <!-- <div style="width: 100px;height: 50px;background: yellow;" @click="deleteData(item.id)">删除数据</div> -->
            <div class="imgBox">
              <div class="imgTitle">
                <!-- <el-image :src="item.picture_url" fit="cover" /> -->
                <div>服务{{ item.title }}</div>
              </div>
              <el-image :src="item.picture_url" fit="cover" />
            </div>
            <div class="bottomContent">
              <div class="desc">{{ item.description }}</div>
              <div class="labelBox">
                <span v-for="(el, elIndex) in item.tags" :key="elIndex">{{ el.name }}</span>
              </div>
            </div>
            <div class="toPageBtn">
              <el-button class="" type="primary" @click="toDetailPage(item.id)">进入服务</el-button>
            </div>
          </div>
          <div class="oneData spaceUse" v-for="item in 3" :key="item"></div>
        </div>
      </div>
      <!-- <div class="row">
        <el-pagination
          class="elPagination"
          background
          v-model:current-page="pageData.page"
          v-model:page-size="pageData.page_size"
          :small="false"
          :disabled="false"
          :show-jumper="true"
          layout="prev, pager, next, sizes, jumper"
          :total="tableData.count"
          :page-sizes="[10, 20, 50]"
          @size-change="sizeChange"
          @current-change="changePage"
        />
      </div> -->
    </div>
  </q-page>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
import { getModelServices, deleteServicesDetail } from 'src/api/model';
import { modelStore } from 'src/stores/model';
import marketIcon from 'assets/market/marketIcon.png'
import { ElMessage, ElMessageBox } from "element-plus";
const store = modelStore()
const router = useRouter()
const projectId = router.currentRoute.value.params.project_id
const loading = ref(false)
const searchName = ref('')
const dataList = ref(<any>{
  results: []
})
getListData()
function getListData() {
  loading.value = true
  getModelServices().then((res: any) => {
    dataList.value = res.data
    loading.value = false
  }).catch(error => {
    loading.value = false
  })
}
function toDetailPage(dataId: number) {
  store.setServicesId(dataId)
  router.push({ name: 'serve-market-detail', params: { project_id: projectId } })
}
function deleteData(dataId: number) {
  ElMessageBox.confirm('确定删除选中的数据吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteServicesDetail(dataId).then((res: any) => {
      ElMessage.success('删除成功')
      getListData()
    }).catch(error => {
      console.log(error)
    })
  })
}

</script>

<style scoped lang="scss">
.wrapBox {
  padding: 0 !important;

  .nav {
    display: flex;
    align-items: center;
    padding-left: 20px;
    cursor: pointer;
    background-color: var(--nav-bg-color);
    height: 46px;

    ::v-deep .el-breadcrumb {
      display: flex;
      align-items: center;
    }
  }

  .datasetBox {
    margin: 0 20px;

    .contentBox_title {
      position: relative;
      display: flex;
      align-items: center;
      color: var(--title);
      font-weight: 500;
      font-size: 16px;
      padding: 15px 15px;
      border-bottom: 1px solid #e5e6eb;
      background-color: #ffffff !important;

      .icon {
        position: absolute;
        left: 90px;
        top: 22px;
        width: 17px;
      }

      .text {
        position: absolute;
        left: 104px;
        top: 19px;
        font-size: 12px;
        color: #3d5ce4;
        font-weight: 400;
        cursor: pointer;
      }

      .searchBox {
        position: absolute;
        right: 0;
        bottom: -5px;
      }
    }

    .contentBox {
      padding: 12px;
      background-color: #ffffff !important;

      .dataBox {
        .oneData {
          width: 310px;
          border: 1px solid #ccc;
          margin: 0 10px 30px 10px;
          border-radius: 4px;
          overflow: hidden;
          position: relative;
          padding-bottom: 60px;

          .imgBox {
            width: 100%;
            background: #e9e9e9;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;

            .el-image {
              width: 100%;
              height: 190px;
            }

            .imgTitle {
              font-size: 18px;
              position: absolute;
              color: white;
              z-index: 9;
              text-align: center;

              .el-image {
                width: 90px;
                height: 90px;
              }
            }
          }

          .bottomContent {
            width: 100%;

            .desc {
              width: 90%;
              margin: 10px auto;
            }

            .labelBox {
              width: 92%;
              margin: 10px auto;

              span {
                color: #ff7411;
                background: #ffdcc3;
                margin: 0 5px 10px 5px;
                padding: 0 5px;
                border-radius: 3px;
                display: inline-block;
              }
            }

          }

          .toPageBtn {
            width: 100%;
            display: flex;
            justify-content: center;
            margin: 15px auto 10px auto;
            text-align: center;
            position: absolute;
            bottom: 10px;

            .el-button {
              width: 120px;
              height: 40px;
            }
          }
        }

        .spaceUse {
          height: 0;
          opacity: 0;
          border: 0;
          margin: 0 10px 0 10px;
        }

        .spaceUse {
          height: 0;
          opacity: 0;
          border: 0;
          margin: 0 10px 0 10px;
        }
      }
    }
  }
}
</style>
